<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用DOM的className和style等属性设计纵向选项卡</title>
<link href="css/ent960_55.css" rel="stylesheet" type="text/css" />
<style>
#liveshow_title {
	background: url(images/imgmap2-5.gif) 0px -330px;
	height: 41px
}
#liveshow {
	background: url(images/imgmap2-5.gif) 0px -371px; height: 196px
}
#liveshow_tabs {
	padding-left: 5px; float: left; width: 82px; padding-top: 17px
}
#liveshow_tabs .bjon {
	background: url(images/city-1.png) 0px 0px; width: 82px; height: 58px
}
#liveshow_tabs .bjoff {
	background: url(images/city-1.png) -246px 0px; width: 82px; height: 58px
}
#liveshow_tabs .shon {
	background: url(images/city-1.png) -82px 0px; width: 82px; height: 58px
}
#liveshow_tabs .shoff {
	background: url(images/city-1.png) -328px 0px; width: 82px; height: 58px
}
#liveshow_tabs .gzon {
	background: url(images/city-1.png) -164px 0px; width: 82px; height: 58px
}
#liveshow_tabs .gzoff {
	background: url(images/city-1.png) -410px 0px; width: 82px; height: 58px
}
#liveshowconts1 {
	float: left; width: 873px; padding-top: 13px; height: 183px
}
#liveshowconts2 {
	float: left; width: 873px; padding-top: 13px; height: 183px
}
#liveshowconts3 {
	float: left; width: 873px; padding-top: 13px; height: 183px
}
</style>

</head>
<body>

<script>		
function tab_live(n){
  var m_n = document.getElementById("liveshow_tabs").getElementsByTagName("div");
  var c_n = document.getElementById("liveshowconts1").getElementsByTagName("ul");
  if(n==0){
	m_n[0].className="bjon";
	m_n[1].className="shoff";
	m_n[2].className="gzoff";
	c_n[0].style.display="block";
	c_n[1].style.display="none";
	c_n[2].style.display="none";
  }
  if(n==1){
	m_n[0].className="bjoff";
	m_n[1].className="shon";
	m_n[2].className="gzoff";
	c_n[0].style.display="none";
	c_n[1].style.display="block";
	c_n[2].style.display="none";
  }
  if(n==2){
	m_n[0].className="bjoff";
	m_n[1].className="shoff";
	m_n[2].className="gzon";
	c_n[0].style.display="none";
	c_n[1].style.display="none";
	c_n[2].style.display="block";
  }	   
}
</script>	

<div class="main960 box_hr12"></div>
<div class="main960" id="liveshow_title"></div>
<div class="main960" id="liveshow">
  <div class="float_l" id="liveshow_tabs">
      <div class="bjoff" onMouseOver="tab_live(0)"></div>
      <div class="shoff" onMouseOver="tab_live(1)"></div>
      <div class="gzon" onMouseOver="tab_live(2)"></div>
  </div>
  <div id="liveshowconts1">
      <ul class="liveshow_list line_h_26 font_s_14" style="display: none; ">
        <li>·<a href="http://ent.qq.com/a/20090826/000459.htm" target="_blank">“太阳”北京演唱会 移师首都体育馆</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090826/000458.htm" target="_blank">齐豫北京音乐会将正式开票 赠限量版签名海报</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090826/000226.htm" target="_blank">沸腾演唱会千万巨资打造 七大精彩看点抢先曝</a><!--[if !IE]>|xGv00|01822f77a50d86c473431cbae2c49d56<![endif]--> 
        </li><li>·<a href="http://ent.qq.com/a/20090828/000333.htm" target="_blank">韩国爆笑《Jump》只靠真功夫 绝活功力飞舞北展</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090828/000241.htm" target="_blank">话剧《浮士德》：沉静气质背后的巨大张力(图)</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090828/000066.htm" target="_blank">组图：钟欣桐舞台剧造形曝光 扮粗鲁妹气死老爸</a><!--[if !IE]>|xGv00|5582bbb7ae56152e47591a3679b1c9cd<![endif]--> 
        </li></ul>
      <ul class="liveshow_list line_h_26 font_s_14" style="display: none; ">
        <li>·<a href="http://ent.qq.com/a/20090826/000433.htm" target="_blank">S.H.E上海演唱会七夕开票 爱要一起唱出来(图)</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090826/000266.htm" target="_blank">S.H.E10月上海演唱会七夕开票 呼应爱的主题</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090826/000251.htm" target="_blank">乐坛真正的超男超女 
        “你呀，灵格”为上海而组</a><!--[if !IE]>|xGv00|d689092b169b1aaed730ed81ff307833<![endif]--> 
      
        </li><li>·<a href="http://ent.qq.com/a/20090819/000203.htm" target="_blank">殷硕领衔《女儿梦》 
        奥运独舞者钟情舞蹈不串行</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090813/000297.htm" target="_blank">舞步中蹈出午夜情欲 
        《午夜浓情吧》有点“色”</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090813/000169.htm" target="_blank">《燃烧地板》9月重燃上海 全是舞蹈世界冠军</a><!--[if !IE]>|xGv00|46de9cb72453f067b466687d1bcbea36<![endif]--> 
        </li></ul>
      <ul class="liveshow_list line_h_26 font_s_14" style="display: block; ">
        <li>·<a href="http://ent.qq.com/a/20090823/000056.htm" target="_blank">黎明广州个唱落幕 “金句王”变“温情王”</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090807/000148.htm" target="_blank">陈绮贞月末广州开唱 
        歌迷被要求戴“安全帽”</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090806/000083.htm" target="_blank">林忆莲本周六广州体育馆开唱 欲拉绯闻男友共舞</a><!--[if !IE]>|xGv00|79440792d98616f1c2f0060f335c4ee0<![endif]--> 
        </li><li>·<a href="http://ent.qq.com/a/20090805/000294.htm" target="_blank">王洛宾与西部民歌“带你去那遥远的地方”</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090722/000080.htm" target="_blank">詹瑞文一月三台Show引来质疑 部分价位票已售罄</a> 
        </li><li>·<a href="http://ent.qq.com/a/20090701/000126.htm" target="_blank">詹瑞文“化身”周笔畅 “Sa爸”亮相颇受关注</a><!--[if !IE]>|xGv00|2eecd6df7ae17f3951a3b7be90b04331<![endif]--> 
        </li></ul>
      <dl class="book_online">
        <dt><span class="float_r"><a href="http://ent.qq.com/live" target="_blank">更多&gt;&gt;</a></span><span class="font_w_b d_red font_s_14">热点演出</span> 
        </dt><dd class="padding_t10">
        <table cellspacing="0" cellpadding="0" width="432" border="0">
          <tbody>
          <tr>
            <td height="24">·<a href="http://www.piao.com.cn/ticket_10778.html" target="_blank">沸腾魅力无限北京演唱会</a></td>
            <td>北京</td>
            <td><a href="http://www.piao.com.cn/ticket_10778.html" target="_blank"><img height="19" src="images/button12.gif" width="68" /></a></td></tr>
          <tr>
            <td width="182" height="24">·<a href="http://www.piao.com.cn/ticket_10637.html" target="_blank">鸟巢版歌剧《图兰朵》</a></td>
            <td width="178">北京</td>
            <td width="72"><a href="http://www.piao.com.cn/ticket_10637.html" target="_blank"><img height="19" src="images/button12.gif" width="68" /></a></td></tr>
          <tr>
            <td height="24">·<a href="http://www.piao.com.cn/ticket_11497.html" target="_blank">电玩主题音乐中国巡演</a></td>
            <td>北京</td>
            <td><a href="http://www.piao.com.cn/ticket_11497.html" target="_blank"><img height="19" src="images/button12.gif" width="68" /></a></td></tr>
          <tr>
            <td height="24">·<a href="http://www.piao.com.cn/ticket_10178.html" target="_blank">水立方芭蕾舞剧《天鹅湖》 </a></td>
            <td>北京</td>
            <td><a href="http://www.piao.com.cn/ticket_10178.html" target="_blank"><img height="19" src="images/button12.gif" width="68" /></a></td></tr>
          <tr>
            <td height="24">·<a href="http://sh.piao.com.cn/ticket_11248.html" target="_blank">潘玮柏世界巡演上海站</a></td>
            <td>上海 </td>
            <td><a href="http://sh.piao.com.cn/ticket_11248.html" target="_blank"><img height="19" src="images/button12.gif" width="68" /></a></td></tr>
          <tr>
            <td height="24">·<a href="http://www.piao.com.cn/ticket_11596.html" target="_blank">《声——色文章》北京站</a></td>
            <td>北京</td>
            <td><a href="http://www.piao.com.cn/ticket_11596.html" target="_blank"><img height="19" src="images/button12.gif" width="68" /></a></td></tr></tbody></table><!--[if !IE]>|xGv00|67152d0393e33ced8145e336f53c58eb<![endif]--></dd></dl>
  </div>
  <div class="clr"></div>
</div>

</body>
</html>
